<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48' title="佣金提现"></u-navbar>
		<view class="main">

			<view class="total">
				<view class="title">
					可提现佣金
				</view>
				<view class="num">
					{{commission.commission}}
				</view>
			</view>
			<view class="lable">
				提现金额
			</view>
			<view class="inputBox">
				<text>¥</text>
				<input type="text" placeholder="请输入提现金额" v-model="money" />
			</view>
			<view class="sunBtn" @click="submiBtn">
				提现
			</view>
			<view class="tips">
				<view class="p">
					* 佣金提现的金额会提现到我的钱包
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				money: '', //提现金额
				commission: {}
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			async submiBtn() {
				let that =this
				let {
					money,
					commission
				} = this
				if (commission.commission == 0) {
					uni.showToast({
						title: '可提现佣金为0',
						icon: 'none'
					})
					return
				} else {
					if (!money) {
						uni.showToast({
							title: '请输入提现金额',
							icon: 'none'
						})
						return
					}
					let res = await myRequest.commissionToWallet({
						commission: money
					})
					if (res.status) {
						uni.showToast({
							title: '提现成功',
						})
						this.money = ''
						setTimeout(function(){
							that.getData()
						},2000)
					}
				}
			},
			getData() {
				myRequest.mycommission().then(res => {
					this.commission = res.data
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 20rpx;

		.total {
			width: 100%;
			height: 260rpx;
			border-radius: 16rpx;
			padding-left: 66rpx;

			@include bgi('../../../static/imgs/jfbanner.png') .title {
				padding-top: 74rpx;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #FFFFFF;
			}

			.num {
				margin-top: 42rpx;
				font-size: 42rpx;
				font-family: Arial;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.lable {
			height: 100rpx;
			text-align: left;
			line-height: 100rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
		}

		.inputBox {
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0 38rpx;

			input {
				text-indent: 12rpx;
			}
		}

		.sunBtn {
			margin: 44rpx auto 0;
			width: 660rpx;
			height: 100rpx;
			background: linear-gradient(180deg, #FB8703 0%, #F7270C 100%);
			border-radius: 16rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FFFFFF;
		}

		.tips {
			margin-top: 32rpx;

			.p {
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #999999;
				line-height: 48rpx;
			}
		}
	}

	/deep/ .u-checkbox {
		margin-left: auto;
	}

	/deep/ .u-checkbox__label {
		margin-left: 0;
		margin-right: 0;
	}
</style>
